<template>
  <section class="message-page" v-loading="loading">
    <div class="content">

      <header class="header-content">
        <h3>{{ $t('message.setting.h1') }}</h3>
        <div>{{ $t('message.setting.des1') }}</div>
      </header>

      <MessageTab class="tab-content" v-model="loading"/>
    </div>
  </section>
</template>

<script>
import MessageTab from './components/MessageTab'
export default {

  components:{
    MessageTab
  },

  data(){
    return {
      loading:false
    }
  }
  
}
</script>

<style lang="scss" scoped>
.message-page{
  padding:16px;
  height:100vh;
  box-sizing: border-box;
  border-radius: 4px;
  .content{
    border-radius: 4px;
    background:#fff;
    height:100%;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    .header-content{
      padding:12px 16px 15px;
      border-bottom:1px solid #E8E8E8;
      h3{
        font-size: 16px;
        font-weight: 600;
        color: #262626;
        line-height: 22px;
        margin:0;
      }
      div{
        margin-top:4px;
        font-size: 12px;
        font-weight: 400;
        color: #8C8C8C;
        line-height: 20px;
      }
    }

    .tab-content{
      padding: 12px;
      overflow: hidden;
    }
  }
}
</style>
